<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>dojox.fx - animation sets to use!</title>
		
	<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true" ></script>
	<script type="text/javascript" src="../_base.js"></script>
	<style type="text/css">
		@import "../../../dojo/resources/dojo.css";
		@import "../../../dijit/themes/dijit.css";
		@import "../../../dijit/themes/tundra/tundra.css";
		@import "../../../dijit/tests/css/dijitTests.css";
	
		#crossfade {
			position:absolute;
			top:0;
			left:300px; 
			border:2px solid #ededed; 
			width:50px; height:50px; 
			background:#fff; 
			text-align:center; 
		}
	
		table tr { padding:5px; margin:5px; border:1px solid #ccc; }

		.box { 
			width:75px; height:75px; float:left;
			border:1px solid #ededed;
			padding:20px;
			background-color:#fee; 
		}
		.two { background-color:#c7bedd; } 
		.nopad { padding:0 !important;
			width:100px; height:100px; border:0;
		 } 
		.hidden {
			opacity:0;
		}
	</style>
	<script type="text/javascript">
		dojo.require("dijit.form.Button");
		dojo.require("dijit.TitlePane");
	
		function basicXfade(){
			dojox.fx.crossFade({
				nodes: [dojo.byId('node1'),dojo.byId('node2')],
				duration: 1000
			}).play();
		};

		function absoluteXfade(){
			dojox.fx.crossFade({
				nodes: ["node3","node4"],
				duration:1000
			}).play();
		};

		var _anim; 
		function simpleLoop(){
			dojo.byId('button').disabled = "disabled"; 
			_anim = dojox.fx.crossFade({
				nodes: ["node5","node6"],
				duration:1000
			});
			dojo.connect(_anim,"onEnd","simpleLoop");
			_anim.play(500);
		};
		function stopLoop(){ _anim.stop(); }

		function buttonExample(){
			dojox.fx.crossFade({
				nodes: [
					// FIXME: fails in ie6?!?
					dijit.byId('node7').domNode, 
					dijit.byId('node8').domNode
					],
				duration: 350
			}).play();
		}

		dojo.addOnLoad(function(){
			// this is a hack to make nodes with class="hidden" hidden
			// because ie6 is a horrible wretched beast
			dojo.query(".hidden").forEach(function(node){
				dojo.style(node,"opacity","0"); 
			});


		});

	</script>
</head>
<body class="tundra">
	<h1 class="testTitle">dojox.fx.crossFade test</h1>

	
	<h3>a simple demonstration of two nodes fading simultaneously</h3>
	<div>
	<input type="button" onclick="basicXfade()" value="run" />
	<div style="padding:20px">
		<div id="node1" style="display:inline;" class="box hidden">box1</div>
		<div id="node2" class="box">box2</div>
	</div>
	<br style="clear:both">
	</div>

	<h3>two nodes with position:relative in a container with position:absolute, crossfading together.</h3>
	<input type="button" onclick="absoluteXfade()" value="run" />
	<div>
		<div style="width:100px; height:100px; position:relative; border:1px solid #666; ">
			<div id="node3" style="position:absolute; top:0; left:0;" class="box nopad hidden">box one</div>
			<div id="node4" style="position:absolute; top:0; left:0;" class="box two nopad">box two</div>
		</div>
	<br style="clear:both">
	</div>

	<h3>simple looping crossfade</h3>
	<input type="button" onclick="simpleLoop()" value="run" id="button" />
	<div>
	<div style="padding:20px;">
			<div id="node5" class="box nopad">box one</div>
			<div id="node6" class="box two nopad hidden">box two</div>
	</div>
	<br style="clear:both">
	</div>

	<!-- FIXME: acting oddly, only in IE though 
	<h3>An example of cross-fading a dijit.form.Button</h3>
	<input type="button" onclick="buttonExample()" value="run" id="button" />
	<div>
	<div style="position:relative;">
		<div dojoType="dijit.TitlePane" id="node7" 
			style="position:absolute; top:0; left:0;">Lorem content two</div>
		<div dojoTYpe="dijit.TitlePane" id="node8" class="hidden"
			style="position:absolute; top:0; left:0;">Lorem content one</div>
	</div>
	<br style="clear:both;">
	</div>
	-->

	<h3>that's all, folks...</h3>

</body>
</html>
